<html>
<head>
<link type="text/css" rel="styleSheet" href="css/default.css" />
<link type="text/css" rel="styleSheet" href="css/css.css" />
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/vue-cookies.js"></script>
<script src="js/jquery-3.5.1.js"></script>
</head>
<body>
	<div id="app">
		<div class="article" style="">
			<div style="height: 30px;">
				<h3>{{article.title}}</h3>
			</div>
			<div style="height: 30px;">
				<img src="pic/a.jpg" style="width: 26px;" />{{article.authorname}}
			</div>
			<div id="content" style="overflow: hidden;">{{article.content}}</div>
			<a>阅读全文</a>
			<div style="margin-top: 12px;">
				<button id="like" btncolor="blue" btnsize="s" onclick="addlike()">赞同{{article.like}}</button>
				<button id="nolike" btncolor="blue" btnsize="s"
					onclick="addnolike()">反对{{article.nolike}}</button>
				<button id="time" btncolor="blue" btnsize="s"
					onclick="addfavorite()">收藏</button>
				<button id="time" btncolor="blue" btnsize="s">分享</button>
				<button id="time" btncolor="blue" btnsize="s">举报</button>
				<span id="time" style="float: right">{{article.time}}</span>
			</div>
		</div>
		
		
		<div style="margin-top: 20px;">
		添加评论<br/>
				<textarea style="width:880px;" v-model="inputcomment"></textarea><br/>
				<button v-on:click="addcomment" btncolor="blue" btnsize="m">提交</button>
		</div>
				
				<br/>热门评论
				<div style="border-top: 2px solid #cdd;margin-top: 20px;">
					<div v-for="comment in comments" class="comment"
						style="border-bottom: 1px solid #ddd; height: 80px">
						<div style="float: left; margin: 5">
							<img src="pic/a.jpg" style="width: 40px;" />
						</div>
						<div style="float: left">
							<div style="height: 30px;">{{comment.authorname}}</div>
							<div id="content" style="overflow: hidden;">{{comment.content}}</div>
							<div style="margin-top: 12px; color: grey">
								<span class="bottom-tag">回复</span> <span class="bottom-tag">举报</span>
								<span class="bottom-tag" v-on:click="commentlike(comment.id)">赞同{{comment.like}}</span>
								<span class="bottom-tag" v-on:click="commentnolike(comment.id)">反对{{comment.nolike}}</span>
								<span>{{comment.time}}</span>
							</div>
							</span>
						</div>
					</div>
				</div>
</body>
<script>
	var userid = window.$cookies.get("userid");
	var aid = location.href.split("?")[1];
	loadComment();
	loadArticle();
	var vm = new Vue({
		el : "#app",
		data : {
			article : "123",
			comments : "123",
			inputcomment : ""
		},
		methods : {
			addcomment : function() {
				if (userid == null) {
					alert("请先登录")
				}else{
					var that = this;
					axios({
						url : 'http://localhost/addcomment',
						method : 'post',
						data : {
							"article" : aid,
							"author" : userid,
							"content" : that.inputcomment
						}
					}).then(function(resp) {
						if (resp) {
							alert("评论成功");
							that.inputcomment = "";
							loadComment();
						}
					});
				}
			},
			////////////////////////////
			commentlike : function(cid) {
				axios({
					url : '/comment/addlike/' + cid,
					method : 'get',
				}).then(function(resp) {
					if (resp) {
						loadComment();
					}
				});
			},
			////////////////////////////
			commentnolike : function(cid) {
				axios({
					url : '/comment/addnolike/' + cid,
					method : 'get',
				}).then(function(resp) {
					if (resp) {
						loadComment();
					}
				});
			}
		}
	});
	function addlike() {
		$.ajax({
			url : "http://localhost/addlike/" + aid,
			type : "get",
			success : function(response) {
				if (response) {
					loadArticle();
				}
				;
			}
		});
	}
	function addnolike() {
		$.ajax({
			url : "http://localhost/addnolike/" + aid,
			type : "get",
			success : function(response) {
				if (response) {
					loadArticle();
				}
				;
			}
		});
	}
	function loadArticle() {
		$.ajax({
			url : "http://localhost/getone/" + aid,
			type : "get",
			success : function(response) {
				vm.article = response;
			}
		});
	}
	function loadComment() {
		$.ajax({
			url : "http://localhost/getcomments/" + aid,
			type : "get",
			success : function(response) {
				vm.comments = response;
			}
		});
	}
	function addfavorite() {
		if (userid == -1) {
			alert("请先登录");
		} else {
			$.ajax({
				url : "http://localhost/addfavorite/" + userid + "/" + aid,
				type : "get",
				success : function(response) {
					if (response) {
						alert("收藏成功");
					}
				}
			});
		}
	}
</script>
</html>